// import Vue from 'vue'
// 这里面我们会写全局指令和局部指令。
// 但是我们又遇到了一个问题：那就是现在我们封装的指令都是全局使用的，但是我们还想让它局部使用，那怎么办呢？
// 那就再次封装，只不过这次封装的是对象：{}
export const imgError = {
  // 参数1  el:当前指令所在的dom元素
  // 参数2  binding:指令相关的信息对象
  inserted(el, binding) {
    // inserted：当绑定元素已插入到父节点时调用.
    // 但是这个指令会覆盖掉我们用户自己的头像，那怎么办呢？
    // dom加载失败的时候会触发onerror方法,我们默认头像只能在dom头像图片加载失败之后才能显示
    el.onerror = function () {
      el.src = binding.value
    }

    // console.log(el, binding)
  }
}

export const fontColor = {
  inserted(el, binding) {
    // console.log(el, binding)
    el.style.color = binding.value
  }
}

// 自定义的指令
// 第一个参数是自定义指令名
// Vue.directive('imgError', {
//   // 参数1  el:当前指令所在的dom元素
//   // 参数2  binding:指令相关的信息对象
//   inserted(el, binding) {
//     // 但是这个指令会覆盖掉我们用户自己的头像，那怎么办呢？
//     // dom加载失败的时候会触发onerror方法,我们默认头像只能在dom头像图片加载失败之后才能显示
//     el.onerror = function () {
//       el.src = binding.value
//     }

//     // console.log(el, binding)
//   }
// })

// 自定义一个改变字体颜色的指令
// Vue.directive('fontColor', {
//   inserted(el, binding) {
//     // console.log(el, binding)
//     el.style.color = binding.value
//   }
// })
